<template>
  <div class="login-page">
    <div class="card">
      <div class="left">
        <img src="../assets/5.jpg" class="image image1">
        <img src="../assets/4.jpg" class="image image2">
        <img src="../assets/3.jpg" class="image image3">
      </div>

      <div class="right">
        <div class="header">
          <img src="../assets/6.jpg" alt="Logo" class="logo">
          <h2>登录</h2>
        </div>
        <div class="sub-title">
          <p style="margin-left: 50%">还没有账号？<a href="" style="color: #409EFF;text-decoration: none">立即注册</a></p>
        </div>
        <hr>
        <div class="form">
          <div class="form-group" style="margin-bottom: 30px">
            <label for="username">用户名：</label>
            <input type="text" id="username" placeholder="账号/邮箱/手机号">
          </div>
          <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" id="password" placeholder="请输入密码">
          </div>
          <div>
            <p><el-checkbox v-model="checked" style="margin-left: 26%;">记住我</el-checkbox>
              <a href="" style="font-size: 14px;color: #409EFF;text-decoration: none">忘记密码？</a></p>
            <el-button type="primary">登录</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.login-page {
  background-image: url("../assets/2.jpg");
  background-size: cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card {
  background-color: white;
  width: 800px;
  height: 400px;
  display: flex;
}

.left {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.image {
  width: 100%;
  height: auto;
  position: absolute;
}
.image1 {
  transform: translate(0, 0);
}

.image2 {
  transform: translate(10px, 10px);
}

.image3 {
  transform: translate(20px, 20px);
}

.right {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 70px;
}

.header {
  display: flex;
  align-items: center;
  margin-top: -120px;
}

.logo {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

h2 {
  margin: 0;
}

.sub-title {
  margin-bottom: 10px;
}

hr {
  margin: 20px 0;
  border: none;
  border-top: 1px solid #ccc;
}

.form-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 300px;
}


.el-button{
  width: 200px; /* 设置登录按钮的宽度 */
  margin-top: 20px;
  margin-left: 25.5%;
}

label {
  width: 100px;
}

input {
  flex: 1;
  padding: 5px;
}
</style>